<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- f12ss{{arr}} -->
  <!-- <li>123 {{school.name}} 456</li>
      <li>{{school.age}}</li> -->
  <!-- 如果是对象数据类型 会做一个处理JSON.stringify 所以会有一个属性的取值操作 所以大对象也更新了 -->
  <!-- <li>{{school}}</li> -->
  <div id=app style="width: 100%;height: 100%;color: red;" class="hah">
    <p>a</p>
    <p>{{name}}</p>
    <my-button></my-button>
    <my-button></my-button>
    <aa></aa>
  </div>
 
  <script src="dist/umd/vue.js"></script>
  <!-- 为什么拆分成小组件   1.实现复用  2.方便维护 3.编写组件能拆分尽量拆分 vue的更新问题 每个组件一个watcher 可以减少比对-->
  <script>
    // 全局组件
    Vue.component('my-button', { //Vue.extend
      template: '<button>点我啊 {{a}}</button>',
      data() { // 子组件的数据应该是一个函数  否则会有数据共享的问题
        return {
          a:1
        }
      },
      created() {
        console.log('child created')
      },
      beforeCreate() {
        console.log('child beforeCreate')
      },
      beforeMount() {
        console.log('child beforeMount')
      },
      mounted() {
        console.log('child mounted')
        setInterval(()=> {
          this.a++;
        }, 1000)
      },
    })
    Vue.component('aa', { //Vue.extend
       template: '<button>点我啊</button>',
       name: 'aa'
    })
    // 组件的合并策略  就近策略   我们可以将全局组件放到原型链上
    let vm = new Vue({
      el: '#app',
      created() {
        console.log('parent created')
      },
      beforeCreate() {
        console.log('parent beforeCreate')
      },
      beforeMount() {
        console.log('parent beforeMount')
      },
      mounted() {
        console.log('parent mounted')
      },
      components: {
        aa: {
          template: '<div>hello</div>'
        },
        bb: {
          template: '<div>word</div>'
        }
      },
      data: {
        name: 'haha',
        firstName: '张',
        lastName: "三"
      },
    })
    // 父 beforeCreate =》 created =》 beforeMount =》   子 beforeCreate  created beforeMount mounted  =》  父 mounted
    // console.log(vm) //合并父子组件的components属性  通过原型链进行查找
    // 组件可能是对象 还有可能是一个构造函数, 组件的属性中多了一个hook属性，并且包含着组件的初始化方法
  
  </script>

</body>
</html>